import { allsearch, hotsearch } from "@/apis/mock";
import classNames from "classnames";
import React from "react";
import { Vocabularywrap } from "./styled";

interface propsv {
  onSearch: (value: string) => void;
}
export default function Vocabulary(props: propsv) {
  const { onSearch } = props;
  return (
    <Vocabularywrap>
      <div className="introduction">这是 こ江桦的博客的 站内搜索引擎</div>
      <div className="hotsearch">
        <span>热搜词:</span>
        {hotsearch.map((item, i) => {
          return (
            <span className="one" key={i} onClick={(e) => onSearch(item)}>
              {item}
            </span>
          );
        })}
      </div>
      <div className="content">
        <div className="title">你也可以在下面的标签中试试运气。</div>
        <div className="main">
          {allsearch.map((item, i) => {
            return (
              <span
                key={i}
                onClick={(e) => onSearch(item)}
                className={classNames({
                  active: [5, 10, 16, 20, 25].includes(i),
                  active1: [4, 18, 23, 28].includes(i),
                })}
              >
                {item}
              </span>
            );
          })}
        </div>
      </div>
    </Vocabularywrap>
  );
}
